<template>
  <n-grid cols="7" x-gap="24" item-responsive responsive="screen">
    <n-grid-item span="7 m:2">
      <n-card style="height: 420px">
        <div class="flex justify-center items-center flex-col">
          <span class="cursor-pointer" @click="handleOpenAvatarDailog">
            <n-avatar :size="100" round :src="Avatar" object-fit="contain" />
          </span>
          <div class="mt-4 font-medium">{{ profileData?.user?.nickName }}</div>
          <n-list class="w-full pt-3">
            <n-list-item>账号：{{ user?.userName }}</n-list-item>
            <n-list-item>手机号： {{ user?.phonenumber }}</n-list-item>
            <n-list-item>邮箱：{{ user?.email }}</n-list-item>
            <n-list-item>所属角色： {{ profileData?.roleGroup }}</n-list-item>
            <n-list-item>上次登录：{{ user?.loginDate }}</n-list-item>
          </n-list>
        </div>
      </n-card>
    </n-grid-item>

    <n-grid-item span="7 m:5">
      <n-card content-style="padding: 0;" style="height: 420px">
        <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
          <n-tab-pane name="基本信息" display-directive="show">
            <Baseinfo :data="user" @updated="getProfileData" />
          </n-tab-pane>
          <n-tab-pane name="安全设置" display-directive="show">
            <UpdatePassword />
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </n-grid-item>
  </n-grid>

  <AvatarDialog :visible="visible" :data="data" @close="handleCloseAvatarDailog" />
</template>

<script lang="ts" setup>
import { getProfileInfo } from '@/apis/system/user';
import { computed, onMounted, ref } from 'vue';
import Avatar from '@/assets/images/avatar.png';
import Baseinfo from './components/Baseinfo.vue';
import UpdatePassword from './components/UpdatePassword.vue';
import AvatarDialog from './components/AvatarDialog.vue';
import { useDialog } from '@/hooks/useDialog';

const profileData = ref<any>(null);
const user = computed(() => profileData.value?.user || {});

async function getProfileData() {
  try {
    const res: any = await getProfileInfo();
    profileData.value = res.data;
  } catch (error) {}
}

const { visible, data, openDialog, closeDialog } = useDialog();

function handleOpenAvatarDailog() {
  openDialog({ avatar: null });
}

function handleCloseAvatarDailog(needRefresh: boolean) {
  if (needRefresh) {
    getProfileData();
  }
  closeDialog();
}

onMounted(() => {
  getProfileData();
});
</script>

<style lang="less" scoped></style>
